{{#if showHeader}}
  <section class="header clearfix">
    {{#if editing}}
      <h1>{{t "newCatalog.upgrade"}} <span style="font-weight: normal">{{catalogApp.displayName}}</span></h1>
    {{else}}
      <h1>{{#link-to parentRoute}}{{t "newCatalog.catalog"}} {{templateResource.displayName}}{{/link-to}}</h1>
    {{/if}}
  </section>
{{/if}}

<section>
  <div class="row">
    <div class="col span-4 text-center">
      {{#if templateResource.links.icon}}
        <img src={{templateResource.links.icon}} alt={{templateResource.name}} class="mr-20" style="max-height:150px;max-width: 100%;">
      {{/if}}
    </div>
    <div class="col span-8">
      {{#if appReadmeContent}}
        {{marked-down markdown=appReadmeContent}}
      {{else if (not noAppReadme)}}
        <div class="text-center">
          <i class="icon icon-spinner icon-spin icon-3x"></i>
        </div>
      {{else if noAppReadme}}
        <h1 class="mb-10 text-capitalize">
          {{templateResource.name}}
        </h1>
        <p>{{templateResource.description}}</p>
        <div class="row">
          <button class="btn btn-sm bg-transparent pl-0" {{action "toogleDetailedDescriptions"}}>
            {{t "newCatalog.seeMore"}}
          </button>
        </div>
      {{/if}}
    </div>
  </div>
</section>

{{#accordion-list as |al expandFn|}}
  {{#accordion-list-item
      title=(t "newCatalog.appInfo")
      detail=(t "newCatalog.appInfoDetail")
      expandAll=al.expandAll
      expand=(action expandFn)
      expanded=detailExpanded
  }}
    <div class="row">
      {{#if readmeContent}}
        <div class="col span-12" style="overflow-y: auto; max-height: 500px;">
          {{marked-down markdown=readmeContent}}
        </div>
      {{else}}
        <h2 class="mb-10">
          {{t (if editing titleUpgrade titleAdd) name=templateResource.name}}
        </h2>
        <p>{{templateResource.description}}</p>
      {{/if}}
    </div>
  {{/accordion-list-item}}


  {{#accordion-list-item
    title=(t (if selectedTemplateModel.questions "inputAnswers.config" "newCatalog.helm.label"))
    detail=(t (if selectedTemplateModel.questions "inputAnswers.protip" "newCatalog.helm.protip"))
    expandAll=al.expandAll
    expandOnInit=true
    expand=(action expandFn)
  }}

    <div class="row">
      <div class="col span-6">
        {{form-name-description
            model=catalogApp
            nameRequired=true
            descriptionShow=false
            nameDisabled=editing
            bothColClass="col span-12"
            colClass="col span-12"
        }}
      </div>
      <div class="col span-6" style="padding-top: 6px;"> {{!-- matches styles of form-name-description --}}
        <label for="" class="acc-label">{{t "newCatalog.templateVersion"}}</label>
        {{new-select
            classNames="form-control"
            content=sortedVersions
            prompt="newCatalog.version.prompt"
            localizedPrompt=true
            optionLabelPath="version"
            optionValuePath="link"
            value=selectedTemplateUrl
            disabled=getTemplate.isRunning
        }}
        <p class="text-info">{{t (if editing selectVersionUpgrade selectVersionAdd)}}</p>
      </div>
    </div>
    <div class="row">
      {{#unless (or customizeNamespace (not selectedTemplateModel))}}
        <div class="col span-12">
          {{t "newCatalog.customizeNamespace" namespaceId=(if requiredNamespace requiredNamespace primaryResource.name) htmlSafe=true}}
          {{#unless (or editing requiredNamespace)}}
            <button class="btn btn-sm bg-transparent pl-0" {{action "toogleNamespace"}}>
              {{t "generic.customize"}}
            </button>
          {{/unless}}
        </div>
      {{/unless}}
      <div class="col span-12">
        {{#if customizeNamespace}}
          <hr class="mt-20 mb-20"/>

          {{form-namespace
              namespace=primaryResource
              errors=namespaceErrors
          }}
        {{/if}}
      </div>
    </div>

    <hr/>

    {{#if getTemplate.isRunning}}
      <section class="row">
        <div class="text-center">
          <i class="icon icon-spinner icon-spin icon-3x"></i>
        </div>
      </section>
    {{else}}
      <div class="row">
        {{#if selectedTemplateModel}}
          <div class="col span-12">
            {{#if selectedTemplateModel.questions}}
              {{input-answers
                  app=catalogApp
                  selectedTemplate=selectedTemplateModel
                  showHeader=false
                  namespaceId=(if requiredNamespace requiredNamespace primaryResource.name)
              }}
            {{else}}
              {{input-custom-answers
                  app=catalogApp
                  selectedTemplate=selectedTemplateModel
              }}
            {{/if}}
          </div>
        {{/if}}
      </div>
    {{/if}}
  {{/accordion-list-item}}

{{/accordion-list}}

{{#if (and selectedTemplateModel (not getTemplate.isRunning))}}
  {{#if showPreview}}
    <section>
      <div class="over-hr hand no-select"><span {{action "togglePreview"}}>{{t "newCatalog.preview"}} <i class="icon {{if previewOpen "icon-chevron-up" "icon-chevron-down"}}"></i></span></div>

      {{#if previewOpen}}
        <div class="tabs">
          <div class="tab-header row">
            <div class="col span-4">
              <label class="acc-label">{{t "newCatalog.templateFiles"}}</label>
              {{searchable-select
                  content=filenames
                  value=previewTab
                  readOnly=readOnly
              }}
            </div>
          </div>

          <div class="row">
            {{#if decoding}}
              <section class="row">
                <div class="text-center">
                  <i class="icon icon-spinner icon-spin icon-3x"></i>
                </div>
              </section>
            {{else}}
              {{#if (eq  previewTab "answers")}}
                {{code-block code=answersString language="yaml"}}
              {{else}}
                {{code-block code=selectedFileContetnt language="yaml"}}
              {{/if}}
            {{/if}}
          </div>
        </div>
      {{/if}}
    </section>
  {{/if}}

  {{#if upgrade}}
    <div class="checkbox pt-10">
      <label>
        {{input type="checkbox" checked=forceUpgrade}}
        {{t "newCatalog.forceUpgrade"}}
      </label>
    </div>
  {{/if}}
  {{#if isGKE}}
    <div class="banner bg-warning">
      <div class="banner-icon"><span class="icon icon-alert"></span></div>
      <div class="banner-message">
        <p>{{t "ingressPage.gkeIngressWarning"}}</p>
      </div>
    </div>
  {{/if}}

  {{#if errors.length}}
    <section>
      <div class="row">
        <div class="col span-12">
          {{top-errors errors=errors}}
        </div>
      </div>
    </section>
  {{/if}}

  <div class="footer-actions">
    {{save-cancel createLabel=(if editing saveUpgrade saveNew) save="save" cancel="cancel"}}
  </div>
{{else}}
  <div class="footer-actions">
    <button {{action "cancel"}} class="btn bg-transparent">{{t "saveCancel.cancel"}}</button>
  </div>
{{/if}}
